<template><transition appear name="slide-fade">
        <el-breadcrumb separator-class="el-icon-arrow-right">

                <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{'path': item.path}" >{{item.title}}</el-breadcrumb-item>


        </el-breadcrumb></transition>
</template>

<script>
    import store from "@/store/index"
    export default {
        name: "Breadcrumb",
        data(){
          return{
            // list:store.getters.breadList
          }
        },
        computed:{
          list(){
              return store.getters.breadList
          }
        }
        // created() {
        //     console.log(this.$route.meta)
        //     this.getBreadcrumb();
        // },
        // methods:{
        //   getBreadcrumb() {

        //     let matched = this.$route.matched;

        //     //判断是不是有首页
        //     if(this.$route.path != '/login') {
        //         this.list.push({"title": "首页","path": "/home"})
        //     }

        //     matched.forEach(element => {
        //         this.list.push({"title":element.meta.title,"path": element.path})
        //     }); 
        // }
   
        // }
    }

</script>

<style scoped>
    .slide-fade-enter-active {
        transition: all .3s ease;
        transition-delay: .3s;
    }
    .slide-fade-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>